<template>
	<view class="index p10 f16 c0">
		<view class="bf bs6 p10 f14">
			<view class="dfbc p-10-0">
				<text>所属区域</text>
				<view class="dfa" @click="showArea=true">
					<u--input v-model="areaName" border="none" :disabled="true" disabledColor="#fff"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="dfbc p-10-0 ">
				<text>桌位类型</text>
				<view class="dfa" @click="showType=true">
					<u--input v-model="typeName" border="none" :disabled="true" disabledColor="#fff"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-if="!flag" class="dfbc p-10-0">
				<text>桌位编号</text>
				<view class="">
					<u--input v-model="form.name" disabledColor="#ffffff" placeholder="如：A001、B001" border="none">
					</u--input>
				</view>
			</view>
			<view v-if="flag" class="dfbc p-10-0">
				<text>桌台前缀</text>
				<view class="dfa ">
					<u--input v-model="form.fix" disabledColor="#ffffff" placeholder="如：A、B、C" border="none">
					</u--input>
				</view>
			</view>
			<view v-if="flag" class="dfbc p-10-0">
				<text>起始编号</text>
				<view class="dfa ">
					<u--input v-model="form.start" disabledColor="#ffffff" placeholder="如：001、002" border="none">
					</u--input>
				</view>
			</view>
			<view v-if="flag" class="dfbc p-10-0">
				<text>生成数量</text>
				<view class="dfa ">
					<u--input v-model="form.num" disabledColor="#ffffff" placeholder="请输入生成数量" border="none">
					</u--input>
				</view>
			</view>
			<view class="dfbc p-10-0">
				<text>桌位标识码</text>
				<view class="dfa ">
					<u--input v-model="form.zjm" disabledColor="#ffffff" placeholder="请输入桌位标识码" border="none">
					</u--input>
				</view>
			</view>
		</view>
		<view class="mt10 tac f14" :style="{color:'#FD8906'}" @click="flag = !flag">{{flag?'单独新增':'批量新增'}}</view>
		<u-action-sheet :show="showArea" :actions="areaList" @close="showArea = false" @select="selectArea">
		</u-action-sheet>
		<u-action-sheet :show="showType" :actions="typeList" @close="showType = false" @select="selectType">
		</u-action-sheet>
		<view class="buts bf5">
			<view class="p-0-20 mb10">
				<view class="cf bs30 tac p10 f14 wei" :style="{background:subColor,color:'#000'}" @click="save">确认新增</view>
			</view>
			<view class="c8 tac pb15 f14" @click="cancel">取消</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	export default {
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				title: '',
				show: false,
				flag: false,
				list: {
					name: '',
					type: 0, //空闲0，待支付1
					num: 0,
				},
				showArea: false,
				showType: false,
				areaList: [],
				typeList: [],
				areaName:'',
				typeName:'',
				form: {
					rate: 1,
				},
			}
		},
		onLoad(options) {
			this.getTableArea()
			this.getTableType()
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			async getTableArea() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.tableArea,
					data: {
						pageSize: 999
					}
				})
				this.areaList = list ? list : []
			},
			async getTableType() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.tableType,
					data: {
						pageSize: 999
					}
				})
				list.forEach( (v) =>{
					v.subname = `${v.max}人`
				})
				this.typeList = list ? list : []
			},
			selectArea(e) {
				this.form.areaId = e.id
				this.areaName = e.name
			},
			selectType(e) {
				this.form.typeId = e.id
				this.typeName = e.name
			},
			async save() {
				this.form.storeId = this.storeId
				const {
					msg
				} = await this.beg.request({
					url: this.flag ? this.api.tablebatch : this.api.tableList,
					method:'POST',
					data:this.form
				})
				uni.showToast({
				  title: msg
				}).then(()=>{
					uni.reLaunch({
						url: "/pages/order/tabels/index"
					})
				});
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
			select(v) {
				this.form.name = v.name
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-input__content__field-wrapper__field {
		text-align: right !important;
	}

	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	/deep/.u-action-sheet__item-wrap__item {
	    flex-direction: row !important;	
	}
	/deep/.u-action-sheet__item-wrap__item__subname {
	    margin-top: 0!important;
		margin-left: 5px;
	}
</style>